<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>SkyMall | 商城</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/layui/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        #product_cate{
            margin-bottom: 50px;
        }
    </style>
</head>
<body class="site-home">
<!--头部模块-->
<div th:replace="mall/common::head"></div>
<div class="layui-container" id="content">
    <!--一级分类商品-->
    <div class="layui-row">
        <input type="hidden" id="cid" th:value="${category.id}"/>
        <input type="hidden" id="type" th:value="${category.type}"/>
        <div class="layui-col-md12"><h1 class="site-h1"><i class="fa fa-gift" style="color: #FF5722;"></i>
            &nbsp;<span th:text="${category.cname}"></span></h1></div>
        <div th:if="${category.type == 1}" style="margin-top: 10px;margin-bottom: 20px;">
            <span class="layui-breadcrumb" lay-separator="|" id="categorysec">
                <!--这里显示二级分类-->
            </span>
        </div>
    </div>
    <div class="layui-row" style="text-align: center;">
        <div class="layui-row" id="product_cate">

        </div>
        <a class="more" href="javascript: more();">点击加载更多</a>
    </div>
    <script>
        //            <![CDATA[
        var pageNo = 0;
        $(function () {
            //所显现分类的类型
            var type = $("#type").val();
            loadCategorySec(type);
            loadProduct(pageNo);
        });

        //加载所有二级分类
        function loadCategorySec(type) {
            if (type != 1) {
                return;
            }
            var cid = $("#cid").val();
            $.get("getCategorySec.do?cid=" + cid, function (data) {
                if (data.state == 0) {
                    var span = $("#categorysec");
                    $(data.data).each(function (index, item) {
                        var a = $("<a style='color: #0b94ea !important;font-size: 18px;font-weight: 300;' href='category.html?cid=" + item.id + "'>" + item.cname + "</a>");
                        span.append(a);
                    });
                } else {
                    layer.msg(data.message);
                }
            });
        }

        function loadProduct(pageindex) {
            var cid = $("#cid").val();
            var type = $("#type").val();
            var url = "category.do?cid=" + cid + "&pageSize=12&pageNo=" + pageindex;
            if (type == 2) {
                url = "categorySec.do?csId=" + cid + "&pageSize=12&pageNo=" + pageindex;
            }
            $.get(url, function (data) {
                if (data.state == 0) {
                    pageNo++;
                    var div = $("#product_cate");
                    if ((!data.data || data.data.length <= 0) && pageNo > 0) {
                        layer.msg("没有更多了");
                    }
                    appendToPage(div, data.data);
                } else {
                    layer.msg("请求失败！")
                }
            });

        }

        function more() {
            loadProduct(pageNo);
        }

        function appendToPage(div, data) {
            $(data).each(function (index, item) {
                var productDiv = $("<div class='layui-col-md3 layui-col-xs6'></div>");
                var conetDiv = $("<div class='card  layui-anim layui-anim-scale'></div>");
                productDiv.append(conetDiv);
                var imgdiv = $("<div class='product_image'><img src=" + item.image + "></div>");
                conetDiv.append(imgdiv);
                var priceDiv = $("<div style='text-align: left;'>商城价：<span class='price1'>" + item.shopPrice + "</span></div>");
                conetDiv.append(priceDiv);
                conetDiv.append($("<div class='product_title'><a href='/mall/product/get.html?id=" + item.id + "'>" + item.title + "</a></div>"));
                div.append(productDiv);
            });
        }

        //            ]]>
    </script>
</div>
<!--底部-->
<div th:replace="mall/common::foot"></div>
</body>
</html>